<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :span="17">
          <div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i
              >{{ name }}
            </div>
            <div class="explain">
              考核周期：{{ info.startDate }}-{{ info.endDate }} 被考核地区：{{
                info.assessAreaName
              }}
              <span
                >还剩
                <b>{{ expireDate }}天</b>截止，截止后，将无法再自评举证</span
              >
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <!-- <div class="rightBox">
                        <el-row type="flex" justify="end">
                            <el-col :span="6">
                                <div class="totalScore">
                                    <h3>总分</h3>
                                    <p class="mainColor">{{info.allScore}}</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="selfScore">
                                    <h3>自评分</h3>
                                    <p class="mainColor">{{info.allSelfEvaluateScore}}</p>
                                </div>
                            </el-col>
                        </el-row>
                    </div> -->
          <div class="rightBox">
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ info.allScore }}</h3>
              <p class="scoreStyleInfo">总分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ info.allSelfEvaluateScore }}</h3>
              <p class="scoreStyleInfo">自评分</p>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row type="flex">
        <el-col :xl="4" :lg="6" :md="8" :sm="7" class="checkItems">
          <el-row>
            <el-col :span="6">考核项</el-col>
            <el-col :span="6" :offset="11"
              >还剩 <b :style="{ color: '#ff0000' }">{{ noNum }}</b
              >项</el-col
            >
          </el-row>
          <el-row class="itemBox">
            <el-col :span="24">
              <template v-for="(item, index) in info.saveStatus">
                <el-col :span="6" :key="index">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    @click="tooltipIndex(index + 1)"
                  >
                    <div slot="content">{{ item.itemName }}</div>
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      :class="['itemBtn', 'checkingBtn']"
                      v-if="item.id == id"
                      >{{ item.sortCode }}</el-button
                    >
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      :class="['itemBtn', 'checkBtn']"
                      v-else-if="item.status == 1"
                      >{{ item.sortCode }}</el-button
                    >
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      class="itemBtn"
                      v-else
                      >{{ item.sortCode }}</el-button
                    >
                  </el-tooltip>
                </el-col>
              </template>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xl="20" :lg="18" :md="16" :sm="17" class="checkInfo">
          <div class="itemTitle">
            <h4>{{ titleIndex + 1 }}、{{ info.content }}</h4>
            <p>{{ info.illustration }}</p>
          </div>
          <el-table :data="tableList" border style="width: 100%">
            <el-table-column
              prop="scale"
              label="评分标准"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="score"
              label="自评得分"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="exeam"
              label="考核评定"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row>
            <el-form
              :model="formData"
              :rules="formRules"
              ref="formData"
              class="formData"
            >
              <el-form-item
                prop="selfEvaluateScore"
                label="自评得分："
                class="row-padding-bottom"
                :style="{ width: '200px' }"
              >
                <el-input
                  type="text"
                  placeholder="请输入"
                  v-model="formData.selfEvaluateScore"
                  :style="{ width: '90%' }"
                ></el-input
                >&nbsp;分
              </el-form-item>
              <el-form-item
                prop="selfIllustration"
                label="自评说明："
                class="row-padding-bottom"
              >
                <el-input
                  type="textarea"
                  placeholder="请输入详细评价说明"
                  v-model="formData.selfIllustration"
                ></el-input>
              </el-form-item>
              <el-form-item label="自评支持材料：" class="content">
                <el-row>
                  <el-col :span="24" class="bg">
                    <uploadAnnex
                      @getFileList="getFileList"
                      :limitationFactor="limitationFactor"
                      @getFile="getFile"
                    />
                    <ul class="upLoadFile">
                      <li v-for="(item, index) of upLoadFile" :key="index">
                        <i class="icon iconfont iconfujian"></i> {{ item.name }}
                        <span class="del" @click="delFile(index)">删除</span>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="saveBtn commonBut"
                  @click="saveInfo"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-row class="upToNextBtn">
            <el-button type="primary" @click="goPre">上一项</el-button>
            <el-button type="primary" @click="goNext">下一项</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'selfEvalutionResult',

  data() {
    var checkEvaluateScore = (rule, value, callback) => {
      var selfEvaluateScore = this.formData.selfEvaluateScore
      if (!selfEvaluateScore) {
        return callback(new Error('自评得分不能为空'))
      } else if (selfEvaluateScore === '0.0') {
        callback(new Error('自评得分不得超过标准分值'))
      } else {
        var rePayTotal = /^(([1-9][0-9]*)|(([0]\.\d{1}|[1-9][0-9]*\.\d{1})))$/

        if (!rePayTotal.test(value) && selfEvaluateScore !== '0') {
          callback(new Error('自评得分仅支持输入小数点后1位'))
        } else {
          callback()
        }
      }
    }

    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 10, //自定义上传文件最大设置
        messageFileSizetip: '最多上传10M文件', //自定义报错提示语
        formatType: 'typeFive', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeThree', //自定义上传按钮类型
      },
      name: '',
      noNum: '',
      titleIndex: 0,
      assessId: '',
      assessAreaName: '',
      expireDate: '',
      endDate: '',
      startDate: '',
      isCheck: false,
      isChecking: false, //正在被考核项
      //表格数据
      info: {},
      tableList: [],
      btsList: [],
      formData: {
        id: '',
        selfEvaluateScore: '', //必传
        selfIllustration: '', //必传
        selfEvaluateFileList: [], //自评支持材料---对象数组，非必传
      },
      upLoadFile: [],
      formRules: {
        selfEvaluateScore: [
          {
            required: true,
            validator: checkEvaluateScore,
            trigger: 'blur',
          },
        ],
        selfIllustration: [
          {
            required: true,
            message: '自评说明不能为空',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 500,
            message: '自评说明不超过500字',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  components: {},
  created() {
    this.id = this.$route.query.id
    this.assessId = this.$route.query.assessId
    this.expireDate = this.$route.query.expireDate
    this.name = this.$route.query.name
    this.getDetail(this.id)
    //this.getBtsList(this.assessId);
    this.formData.selfEvaluateScore = '' //必传
    this.formData.selfIllustration = '' //必传
  },
  methods: {
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {},
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },

    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    goPre() {
      var ct = this.btsList.length
      this.titleIndex = this.titleIndex - 1
      if (this.titleIndex < 0) {
        this.titleIndex = ct - 1
      }
      this.getDetail(this.btsList[this.titleIndex].id)
    },
    goNext() {
      var ct = this.btsList.length

      this.titleIndex = this.titleIndex + 1
      if (this.titleIndex >= ct) {
        this.titleIndex = 0
      }
      this.getDetail(this.btsList[this.titleIndex].id)
    },
    tooltipIndex(index, itemId) {
      this.titleIndex = index
      this.getDetail(itemId)
    },
    getBtsList(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/assessdetailpage',
        data: {
          pageNo: 1,
          pageSize: 9999,
          assessId: this.assessId,
        },
      })
        .then((response) => {
          this.btsList = response.data.result.results

          var ct = 0
          this.btsList.forEach((item, index) => {
            if (item.id == this.id) {
              this.titleIndex = index
            }
            if (
              item.selfEvaluateStatus == 0 ||
              item.selfEvaluateStatus == null
            ) {
              ct++
            }
          })

          this.noNum = ct
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },

    getDetail(id) {
      this.formData.selfEvaluateScore = '' //必传
      this.formData.selfIllustration = '' //必传
      this.id = id
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/selfassessdetailinfo',
        data: {
          id: id,
        },
      })
        .then((response) => {
          this.info = response.data.result

          if (this.info.selfEvaluateStatus == 1) {
            this.formData.selfEvaluateScore =
              this.info.selfEvaluateScore == 0
                ? '0.0'
                : this.info.selfEvaluateScore
            this.info.allSelfEvaluateScore =
              this.info.allSelfEvaluateScore == null ||
              this.info.allSelfEvaluateScore == 0
                ? '0.0分'
                : this.info.allSelfEvaluateScore + '分'
            this.info.selfEvaluateScore =
              this.info.selfEvaluateScore == null ||
              this.info.selfEvaluateScore == 0
                ? '0.0分'
                : this.info.selfEvaluateScore + '分'
          } else {
            this.formData.selfEvaluateScore =
              this.info.selfEvaluateScore == 0
                ? ''
                : this.info.selfEvaluateScore
            this.info.allSelfEvaluateScore =
              this.info.allSelfEvaluateScore == null ||
              this.info.allSelfEvaluateScore == 0
                ? '--'
                : this.info.allSelfEvaluateScore + '分'
            this.info.selfEvaluateScore =
              this.info.selfEvaluateScore == null ||
              this.info.selfEvaluateScore == 0
                ? '--'
                : this.info.selfEvaluateScore + '分'
          }
          if (this.info.assessEvaluateStatus == 1) {
            this.info.allAssessEvaluateScore =
              this.info.allAssessEvaluateScore == null ||
              this.info.allAssessEvaluateScore == 0
                ? '0.0分'
                : this.info.allAssessEvaluateScore + '分'
            this.info.assessEvaluateScore =
              this.info.assessEvaluateScore == null ||
              this.info.assessEvaluateScore == 0
                ? '0.0分'
                : this.info.assessEvaluateScore + '分'
          } else {
            this.info.allAssessEvaluateScore =
              this.info.allAssessEvaluateScore == null ||
              this.info.allAssessEvaluateScore == 0
                ? '--'
                : this.info.allAssessEvaluateScore + '分'
            this.info.assessEvaluateScore =
              this.info.assessEvaluateScore == null ||
              this.info.assessEvaluateScore == 0
                ? '--'
                : this.info.assessEvaluateScore + '分'
          }

          this.info.allScore =
            this.info.allScore == null || this.info.allScore == 0
              ? '--'
              : this.info.allScore + '分'
          this.info.referScore =
            this.info.referScore == null || this.info.referScore == 0
              ? '--'
              : this.info.referScore + '分'

          this.formData.selfIllustration = this.info.selfIllustration
          this.tableList = [
            {
              scale: this.info.referScore,
              score: this.info.selfEvaluateScore,
              exeam: this.info.assessEvaluateScore,
            },
          ]
          var ct = 0
          this.btsList = this.info.saveStatus
          this.btsList.forEach((item, index) => {
            if (item.id == this.id) {
              this.titleIndex = index
            }
            if (item.status == 0) {
              ct++
            }
          })

          this.noNum = ct

          var tempEvaluateFileList = JSON.parse(this.info.selfEvaluateFileList)
          this.upLoadFile = []
          tempEvaluateFileList.forEach((item) => {
            this.upLoadFile.push({
              id: item.id,
              name: item.originalName,
              isImg: false,
              contentType: '',
              size: item.fileSize,
              path: item.relativePath,
              url: item.url,
              source: null,
              createTime: item.updateTime,
            })
          })
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.push({
        path: '/home/checkAffairs/selfEvalutionProofList',
        name: 'selfEvalutionProofList',
        query: {
          id: this.assessId,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkSelfEvalution',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    delFileInfo(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
    successCallBack() {},
    errorCallBack() {},
    saveInfo() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.formData.id = this.id
          this.formData.selfEvaluateFileList = JSON.stringify(this.upLoadFile)
          this.axios({
            method: 'post',
            url: 'api-gov/assessdetail/expand/saveselfassessdetail',
            data: this.formData,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                //评定成功跳到下一项
                var ct = this.btsList.length
                this.titleIndex = this.titleIndex + 1
                if (this.titleIndex >= ct) {
                  this.titleIndex = 0
                }
                this.getDetail(this.btsList[this.titleIndex].id)
                this.formData.selfEvaluateScore = '' //必传
                this.formData.selfIllustration = '' //必传
                this.getDetail(this.id)
                // this.goNext();
                //var tempId=this.btsList[this.titleIndex+1].id;
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              // this.$message.error("数据获取失败");
              //this.$message.error("保存失败");
              this.isSaveLoading = false
            })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainColor {
  color: #009588;
  font-size: 16px;
  font-weight: bold;
}

.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 94px;
  // padding: 24px 0 24px 24px;
  padding: 10px 0 10px 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    padding-top: 14px;
    color: #333;
    .explain {
      padding: 5px 0 0 30px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
      span {
        color: #333;
        b {
          color: #ff0000;
        }
      }
    }
  }
  // .rightBox {
  //     text-align: center;
  //     h3 {
  //         color: #333;
  //         font-size: 16px;
  //     }
  // }
  .rightBox {
    text-align: center;
    float: right;
    div {
      float: left;
      &:first-child {
        margin-right: 10px;
      }
      &:nth-child(2) {
        margin-right: 24px;
      }
    }
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 94px);
  overflow-y: auto;
  .checkItems {
    border-right: 2px dashed #ebeef5;
    font-size: 14px;
    .itemBox {
      margin-top: 20px;
      .itemBtn {
        width: 45px;
        height: 40px;
        margin-bottom: 10px;
        background: #f5f5f5;
        color: #333;
        font-size: 14px;
      }
    }
  }
  .checkInfo {
    padding-left: 40px;
    color: #333;
    font-size: 14px;
    .itemTitle {
      margin-bottom: 20px;
      p {
        margin-left: 25px;
        font-size: 14px;
        color: #999;
      }
    }
    .formData {
      margin-top: 40px;
      .bg {
        background-color: #f5f5f5;
        padding-bottom: 20px;
        .uploadBox {
          position: relative;
          .uploadImg {
            width: 96px;
            height: 36px;
            color: #009588;
            border: 0px solid #009588;
            line-height: 10px;
            &:hover {
              cursor: pointer;
            }
          }
          .uploadImgState {
            font-size: 14px;
            color: #999999;
            margin-left: 12px;
          }

          .upLoadDom {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            input {
              width: 100px;
              height: 36px;
            }
          }
        }
        .upLoadFile {
          color: #333;
          line-height: 21px;
          li {
            margin-bottom: 10px;
            i {
              color: #999;
              margin: 0 0 0 10px;
            }
            .del {
              font-size: 14px;
              color: #db0202;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .upToNextBtn {
      float: right;
      .el-button {
        background-color: #fff;
        color: #009588;
        border: 1px solid #009588;
      }
    }
  }
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
/deep/ .el-input {
  width: 95%;
}

//已考核
.checkBtn {
  background: #009588 !important;
  color: #fff !important;
}
.checkingBtn {
  background: #999 !important;
  color: #fff !important;
}
.el-button--mini,
.el-button--mini.is-round {
  // padding: 7px 15px;
  padding: 7px 0;
  text-align: center;
}
.el-tooltip__popper {
  max-width: 20% !important;
  word-break: break-all;
}
</style>
